var Plane = function( name, color_of_curve ){
    this.bgSVG = paper.path().attr({stroke: "#FFF", "stroke-width": 2, "stroke-linejoin": "round", opacity: 0.05}).hide();
    this.fgSVG = paper.path().attr({stroke: color_of_curve, "stroke-width": 4, "stroke-linejoin": "round"}).hide();
    this.bgp = paper.set();	// 存放用于鼠标显示的路径块
    this.points = paper.set();
    this.color = color_of_curve;
    this.fgSVG.mum = this;
    this.bgSVG.mum = this;
    this.points.mum = this;
    this.orginData = null;
    this.bgpp=[];
    this.show=[];
    this.heightData=[];
    this.absX=[];
    this.absY=[];
    this.svgX=[];
    this.svgY=[];
    this.path=[];
    this.name=name;
    this.cx = 0;
    this.cy = 0;
    this.timeLine = paper.path("M0,0L0,"+C_HEIGHT).attr({"stroke":"#F00","stroke-width":1}).hide();
    this.POP_FUNC_ARRAY = [];
    this.HIDE_FUNC_ARRAY = [];
    this.is_label_visible=false;
    this.leave_timer=null;
}
Plane.prototype.InitPath=function(){
    for ( var i=0, ii=this.show.length; i<ii; i++ ) {
	var y = this.svgY[i];
	var x = this.svgX[i];
        var t = paper.text(x, SVG_HEIGHT-6, this.show[i]).attr(TXT0).toBack(); // 繪制X軸坐標

        if (i==0) {    // 在邊緣處，繪制陰影和曲線（只是計算完放進去）
	    this.path = ["M", x, y, "C", x, y];
            this.bgpp.push( ["M", x, y, "L", (this.svgX[1]+x)/2, (this.svgY[1]+y)/2] ) ;
        }
        if (i==ii-1) {    // 在邊緣處，繪制陰影和曲線（只是計算完放進去）
            this.bgpp.push( ["M", (this.svgX[i-1]+x)/2, (this.svgY[i-1]+y)/2, "L", x, y] ) ;
        }

        if (i && i < ii - 1) { // 在中間處，繪制曲線和陰影（只是計算完放進去）
	    var Y0 = Math.round( this.svgY[i-1] );
	    var X0 = Math.round( this.svgX[i-1] );
	    var Y2 = Math.round( this.svgY[i+1] );
	    var X2 = Math.round( this.svgX[i+1] );
	    var a = getAnchors(X0, Y0, x, y, X2, Y2);
            this.bgpp.push( ["M", (X0+x)/2, (Y0+y)/2, "S", x, y, (X2+x)/2,(Y2+y)/2] );
	    this.path = this.path.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
	    // var dot0 = paper.circle(a.x1, a.y1, 2).attr({fill: "#F00", "stroke": "none"}); // 繪出Y軸重要點的圈圈
	    // var dot1 = paper.circle(a.x2, a.y2, 2).attr({fill: "#0F0", "stroke": "none"}); // 繪出Y軸重要點的圈圈
        }
        var dot = paper.circle(x, y, 4).attr({fill: "#333", stroke: COLOR_OF_CURVE, "stroke-width": 2}); // 繪出Y軸重要點的圈圈
	dot.hide().mum=this;
	dot.eventId=i;
	this.points.push(dot);

	// var tmp0=Math.max(Math.abs(Y0-y),Math.abs(Y2-y)); // 设定鼠标动作区域
	// var tmp1=(tmp0>200 ? 200:tmp0);
	// var heightOfActionPoint= (tmp1<30 ? 30:tmp1*1.1);
        // blanket.push(paper.rect(x-X/2, y-heightOfActionPoint/2, X,heightOfActionPoint).attr({stroke: "none", fill: "#fff", opacity: 0.2})); // 每个点有一个矩形提供鼠标出入操作
        // blanket.push(paper.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0.5})); // 每个点有一个矩形提供鼠标出入操作      
	// blanket.push(paper.rect(x-20, y-20, 40, 40).attr({stroke: "none", fill: "#fff", opacity: 0.2})); // 每个点有一个矩形提供鼠标出入操作
        // var rect = blanket[blanket.length - 1]; // 就是刚刚push到blanket里面的那个矩形，下面的这个函数为它设置鼠标动画

	var bgOfPoint=paper.path().attr({path: this.bgpp[i],"stroke-width":60, fill: "#fff", opacity: 0}).show(); // 每个点有一个矩形提供鼠标出入操作
	bgOfPoint.hide();
	this.bgp.push(bgOfPoint);
	var Hide_func=function(){};
	var Pop_func=function(){};
	(function (x, y, data, lbl, dot, name) {
	    Hide_func=function () {	// 鼠标移出时如何做
		dot.attr("r", 4);
		dot.mum.leave_timer = setTimeout(function () {
		    frame.hide();
		    label[0].hide();
		    label[1].hide();
		    dot.mum.is_label_visible = false;
		}, 1);
	    }
	    Pop_func=function () { // 定义鼠标进入时的行为，匿名函數的好处是可以直接利用外部的变量，javascript是闭包的~~

		clearTimeout(dot.mum.leave_timer);
		var side = "right";
		if (x + frame.getBBox().width > SVG_WIDTH) {
		    side = "left";
		}
		var ppp = paper.popup(x, y, label, side, 1);
		var anim = Raphael.animation({
		    path: ppp.path,
		    transform: ["t", ppp.dx, ppp.dy]
		}, 200 * dot.mum.is_label_visible);
		lx = label[0].transform()[0][1] + ppp.dx;
		ly = label[0].transform()[0][2] + ppp.dy;
		frame.show().stop().animate(anim);
		label[0].attr({text:data + " 英尺" }).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * dot.mum.is_label_visible);
		label[1].attr({text:  "【"+name+"】"+"撞击前"+lbl + "秒"}).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * dot.mum.is_label_visible);
		dot.attr("r", 6);
		dot.mum.is_label_visible = true;
	    }
	    bgOfPoint.hover(Pop_func,Hide_func);
	})(x, y, this.heightData[i], this.show[i], dot, this.name); // ENG FUNC
	this.HIDE_FUNC_ARRAY.push(Hide_func);
	this.POP_FUNC_ARRAY.push(Pop_func);
    }				// END FOR
    this.path = this.path.concat([x, y, x, y]);
    // console.log(this.path);
    this.bgSVG.attr({path: this.path});
    return this;
}				// END FUNC INITPATH
Plane.prototype.InitData=function(){
    // if (this.name==1907){
	for(var i=0;i<DATA.length;i++){
	    if (DATA[i]["heightOf"+this.name]!=null){
		this.show.push(DATA[i]["beginTime"]);
		this.heightData.push(DATA[i]["heightOf"+this.name]);
	    }
	}
    // }else{
    // 	for(var i=DATA.length-1;i>=0;i--){
    // 	    if (DATA[i]["heightOf"+this.name]!=null){
    // 		this.show.push(DATA[i]["beginTime"]);
    // 		this.heightData.push(DATA[i]["heightOf"+this.name]);
    // 	    }
    // 	}
    // }
    return this;
}
Plane.prototype.ShowDialog=function(time){
    for(var i=0;i<DATA.length;i++){
	if (DATA[i]["beginTime"]==time){
	    var el = $("[time="+time+"]").fadeIn("slow");
	    var keepTime=Math.abs((time-DATA[i]["endTime"])*1000);
 	    if (isNaN(keepTime)){
		keepTime=5000;
	    }
	    el.each(function(){
		var idstr=$(this).attr("id").slice(0);
		// setTimeout('$("#'+idstr+'").fadeOut("slow")',keepTime);
		TALK_TIME.push(setTimeout('$("#'+idstr+'").slideUp("slow")',keepTime));
	    });
	}
    }
};
Plane.prototype.show2abs=function(){

    for (var i=0;i<this.show.length;i++){
	if(this.name==1907){
	    this.absX[i] = 480-480*Math.pow((this.show[i]/480),1/3);
	}else{
	    this.absX[i] = 480+480*Math.pow((this.show[i]/480),1/3);
	}
	if(this.heightData[i]>14000){
	    this.absY[i] = 14000+9000*Math.pow(((this.heightData[i]-14000)/9000),1/3);
	}else{
	    this.absY[i] = 14000-9000*Math.pow(((14000-this.heightData[i])/9000),1/3);
	}
    }
    return this;
}
Plane.prototype.abs2svg=function(){
    for (var i=0;i<this.show.length;i++){
        var x = C_WIDTH * this.absX[i] / 960; // scale
        var y = C_HEIGHT * this.absY[i] / 23000;
	this.svgX[i] = Math.round( x+CO_leftgutter);
	this.svgY[i] = Math.round( C_HEIGHT+CO_topgutter-y);
    }
    return this;
}
Plane.prototype.SubPath=function(x){
    // console.log(this.bgSVG.attr("path"));
    // x+=CO_leftgutter;
    x = (this.show2svg(x,0)).sx;
    if ((x==391)&&(this.name==763))x=392;
    var line = paper.path("M"+x+" 0L"+x+" "+SVG_HEIGHT).attr("stroke","#00F").hide();
    var tmp = Raphael.pathIntersection(this.bgSVG.attr("path"),line.attr("path"));
    if (tmp.length==0){
	// var fgPath = this.fgSVG.attrs.path;
	// var finalPoint = fgPath[fgPath.length-1];
	// this.fgSVG.attr({path:this.bgSVG.getSubpath(0,x)}).show();
	// try{this.cy = Math.round(finalPoint[1]);}catch(e){};
	// console.log(x);
	return this;
    }
    this.cy=tmp[0].y;
    var t=tmp[0].bez1;
    var p = ["M",t[0],t[1],"C",t[2],t[3],t[4],t[5],t[6],t[7]];    // tmp[0].segment1;
    var ttmp=paper.path(p).hide();
    var j= ttmp.getTotalLength();
    var i = tmp[0].t1 * j;
    var w = tmp[0].segment1;
    var ddd = ttmp.getSubpath(0,i);
    var k=Raphael.path2curve(ddd);
    // this.cx=k[k.length-1][5];
    this.cx=x;
    var tmp0 = this.bgSVG.attr("path").slice(0,w);
    tmp0.push(k);
    this.fgSVG.attr({path:tmp0}).show();
    ttmp.remove();
    return this;
}
Plane.prototype.GotoTime=function(time){
    if (time>480) time=480;
    if (time<0) time=0;
    // this.SubPath((480-time)/480);
    this.SubPath(time);
    return this;
}
Plane.prototype.UpdateTimeLine=function(x){
    if (x!=undefined){
	this.timeLine.attr({path:["M",x , CO_topgutter,
				  "L",x , C_HEIGHT+CO_topgutter]}).show();
    }
    this.timeLine.attr({path:["M",this.cx , CO_topgutter,
			      "L",this.cx , C_HEIGHT+CO_topgutter]}).show();
    return this;
}
Plane.prototype.GetIMPoint=function(){
    this.points.forEach(function(pEl){
	if ((pEl.st==undefined)||(pEl.st==null)){
	    if (pEl.isPointInside(pEl.mum.cx, pEl.mum.cy)){
		pEl.st=true;
		pEl.show();
		pEl.mum.POP_FUNC_ARRAY[pEl.eventId]();
		return false;
	    }
	}
	return true; });
    return this;
}
Plane.prototype.ClearAll=function(){
    this.points.forEach(function(pEl){
	pEl.st=null;
	pEl.hide();
	// pEl.mum.HIDE_FUNC_ARRAY[pEl.eventId]();
	return true;
    });
    return this;
}
Plane.prototype.MakeUseable=function(){
    this.points.forEach(function(pEl){
	pEl.show();
	return true;});
    this.bgp.forEach(function(pEl){
	pEl.show();
	return true;});
    this.bgp.toFront();
};
Plane.prototype.show2svg=function(x,y){
    var tx,ty;
    if(this.name==1907){
	tx = 480-480*Math.pow((x/480),1/3);
    }else{
	tx = 480+480*Math.pow((x/480),1/3);
    }
    if(y>14000){
	ty = 14000+9000*Math.pow(((y-14000)/9000),1/3);
    }else{
	ty = 14000-9000*Math.pow(((14000-y)/9000),1/3);
    }
    var ox = C_WIDTH * tx / 960; // scale
    var oy = C_HEIGHT * ty / 23000;
    return {
	sx: Math.round( ox+CO_leftgutter),
	sy: Math.round( C_HEIGHT+CO_topgutter-oy)
    }
};
// Plane.prototype.getSubpath=function(){};

Plane.prototype.HideDialog=function(){};
Plane.prototype.PopMsg=function(){};


var K1907 = new Plane(1907,COLOR_OF_CURVE);
K1907.InitData().show2abs().abs2svg().InitPath();

var S763 = new Plane(763,"#0F0");
S763.InitData().show2abs().abs2svg().InitPath();
